<!-- @Deprecated -->
<!--
  注意 open 要设置 .sync
  模态框高度宽度可调
  (
    单位为%
    带footer按钮的情况下效果最小高度在25最好 默认
    不带footer按钮最小高度也需要在15
  )
  默认垂直水平居中
-->
<template>
  <el-dialog class="myDialog" :id="id" :title="title_" :visible.sync="open_" :width="width_"
   @open="modalToggleHandler" @close="modalToggleHandler"
   :modal-append-to-body="false" append-to-body
  >
    <el-scrollbar style="height: 100%;">
      <slot v-if="!remoteUrl"></slot>
      <iframe v-if="remoteUrl" :src="remoteUrl_" class="frameBox"></iframe>
    </el-scrollbar>
    <slot v-if="footerBtn_ && !remoteUrl" name="footer" slot="footer">
        <el-button @click="open_ = false" :size="buttonSize">取 消</el-button>
        <el-button type="primary" @click="ok" :size="buttonSize">保 存</el-button>
    </slot>
  </el-dialog>
</template>
<script>
  import $ from 'jquery'
  export default {
    name: 'MyDialog',
    componentName: 'MyDialog',
    props: {
      open: Boolean,
      remoteUrl: {
        type: String,
        default: ''
      },
      title: String,
      wide: Boolean,
      width: {
        type: String,
        default: '50%'
      },
      height: {
        type: Number,
        default: 25
      },
      footerBtn: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        open_: this.open,
        remoteUrl_: this.remoteUrl,
        wide_: this.wide,
        title_: this.title,
        width_: this.width,
        height_: this.height,
        footerBtn_: this.footerBtn,
        heightTop: 0,
        id: 'dialog' + new Date().getTime(),
        buttonSize: ''
      }
    },
    methods: {
      computeHeight() {
        var height = document.body.scrollHeight
        var dialogH = height * (this.height_ / 100)
        var $this = this
        $this.$nextTick(() => {
          var hh = $('#' + $this.id + ' .el-dialog__header').height() + 30
          var fh = $('#' + $this.id + ' .el-dialog__footer').height()
          fh = fh ? fh + 20 : 0
          $('#' + $this.id + ' .el-dialog__body').css({
            'height': dialogH - hh - fh + 'px',
            'overflowY': 'auto'
          })
          $('#' + $this.id + ' .frameBox').css({
            'height': 'auto',
            'min-height': dialogH - hh - fh + 'px'
          })
          // 计算高度时需要把padding也一起加上
          var temp = $('#' + $this.id + ' .el-dialog').height()
          $('#' + $this.id + ' .el-dialog').css({
            'minHeight': $this.height_ + '%',
            'marginTop': (height - temp) / 2 + 'px'
          })
        })
      },
      modalToggleHandler() {
        if (this.open_) {
          // 打开弹框后动态修改box高度
          this.computeHeight()
        }
        document.getElementById('app').className = this.open_ ? 'mouhu' : ''
        this.$emit('update:open', this.open_)
        if (!this.open_) this.$emit('off', '')
      },
      ok() {
        this.$emit('ok', '')
      }
    },
    mounted() {
      var $this = this
      if ($this.wide_) {
        $this.width_ = '90%'
        $this.height_ = 90
      }
      // TODO 半响应式
      var x = document.body.scrollWidth
      if (x < 460) {
        $this.buttonSize = 'mini'
        return
      }
      if (x < 768) {
        $this.buttonSize = 'small'
        return
      }
      if (x < 992) {
        $this.buttonSize = 'medium'
        return
      }
    },
    watch: {
      open(visible) {
        this.open_ = visible
      },
      remoteUrl(url) {
        this.remoteUrl_ = url
      },
      title(title) {
        this.title_ = title
      },
      wide(d) {
        this.wide_ = d
      },
      width(w) {
        this.width_ = w
      },
      height(h) {
        this.height_ = h || 30
      },
      footerBtn(b) {
        this.footerBtn = b
      }
    }
  }
</script>
<style scoped>
  .el-dialog{
    height: auto;
    margin-top: 5% !important;
  }

  .myDialog >>>.el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .myDialog >>> .frameBox{
    width: 100%;
    border: none;
  }

  .myDialog >>> .el-dialog__header {
    padding: 20px 20px 10px;
    min-height: 35px;
  }

  .myDialog >>> .el-dialog__body {
    padding: 5px 10px;
  }

  .myDialog >>> .el-dialog__footer {
    padding: 10px 20px 10px;
    min-height: 46px;
    /*position: absolute;
    bottom: 0;
    right: 0;*/
  }

</style>
